<template>
	<view class="merchantInto">
		<view class="line">
			<view class="left">
				<text class="txt">真实姓名</text>
			</view>
			<view class="right">
				<input type="text" v-model="formData.merchant_name" value="" placeholder="请输入真实姓名" />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">身份证号</text>
			</view>
			<view class="right">
				<input type="text" v-model="formData.idcard_no" value="" placeholder="请输入身份证号" />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">身份证正面照</text>
			</view>
		</view>
		<view class="photos">
			<image :src="formData.idcard_z_img != '' ? formData.idcard_z_img : 'https://hdsq.aoorange.cn/attachment/xcx/icon/addphoto.png'"
				mode="aspectFill" @click="chooseImage(0)"></image>
			<view>注释：有国徽的为正面</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">身份证反面照</text>
			</view>
		</view>
		<view class="photos">
			<image :src="formData.idcard_f_img != '' ? formData.idcard_f_img : 'https://hdsq.aoorange.cn/attachment/xcx/icon/addphoto.png'"
				mode="aspectFill" @click="chooseImage(1)"></image>
			<view>注释：有头像的为反面</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">银行卡号</text>
			</view>
			<view class="right">
				<input type="number" v-model="formData.bank_no" value="" placeholder="请输入银行卡号" />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">银行卡开户行</text>
			</view>
			<view class="right">
				<input type="number" v-model="formData.back_name" value="" placeholder="请输入银行卡开户行" />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text class="txt">银行卡开户支行</text>
			</view>
			<view class="right">
				<input type="number" v-model="formData.back_zh" value="" placeholder="请输入银行支号" />
			</view>
		</view>
		<view class="heng"></view>
		<view class="line">
			<view class="left">
				<text class="txt">业务员</text>
			</view>
			<view class="right">
				{{business.username + "("+business.mobile+")"}}
			</view>
		</view>
		<view class="heng"></view>
		<view class="deal">
			<view :class="isclick?'sel':'nosel'" @click="isclick = !isclick"></view>
			<text @click="isclick = !isclick">已阅读，并同意</text>
			<text @click="jump('applyAgreement', agreement)">《业务员协议》</text>
		</view>
		<view class="bottom" @click="save">申请业务员</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					bid: 0,
					wechatCode: '',
					realname: '',
					idcard_no: '',
					idcard_z: '',
					idcard_z_img: '',
					idcard_f: '',
					idcard_f_img: '',
					bank_no: '',
					back_name: '',
					back_zh: '',
				},
				business: {
					username: '',
					mobile: '',
				},
				isSubmit: false, //是否提交 防止反复提交
				isclick: false, //是否同意协议
				isLoad: false, //是否刷新
				money: 100,
				agreement: ''
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/salesman/prepare',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						bid: _self.formData.bid
					}
				}).then(res => {
					if (res.code == 200) {
						_self.business = res.data.business;
						_self.formData.realname = res.data.formData.realname;
						_self.formData.idcard_no = res.data.formData.idcard_no;
						_self.formData.idcard_z = res.data.formData.idcard_z;
						_self.formData.idcard_z_img = res.data.formData.idcard_z_img;
						_self.formData.idcard_f = res.data.formData.idcard_f;
						_self.formData.idcard_f_img = res.data.formData.idcard_f_img;
						_self.formData.bank_no = res.data.formData.bank_no;
						_self.formData.back_name = res.data.formData.back_name;
						_self.formData.back_zh = res.data.formData.back_zh;
						console.info(_self.formData);
						uni.setStorageSync('recommend_mobile', _self.business.mobile);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									common.jump('return_one');
								}, 2000)
							}
						});
					}
				});
			},
			async save() {
				if (_self.isSubmit) {
					return;
				}
				if (!_self.isclick) {
					uni.showToast({
						title: "请同意协议",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.realname == "") {
					uni.showToast({
						title: "请填写真实姓名",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.idcard_no == "") {
					uni.showToast({
						title: "请填写身份证号码",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.bank_no == "") {
					uni.showToast({
						title: "请填写银行卡号",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.back_name == "") {
					uni.showToast({
						title: "请填写银行卡开户行",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.back_zh == "") {
					uni.showToast({
						title: "请填写写银行卡开户支行",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.idcard_z_img == "") {
					uni.showToast({
						title: "请上传身份证正面照",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.idcard_z == '') {
					let uresult = await _self.uploadFileFun(_self.formData.idcard_z_img);
					if (!uresult) {
						uni.showToast({
							title: "身份证正面照上传失败",
							icon: 'none'
						});
						return;
					}
					_self.formData.idcard_z = uresult;
				}
				if (_self.formData.idcard_z_img == "") {
					uni.showToast({
						title: "请上传身份证正面照",
						icon: 'none'
					})
					return;
				}
				if (_self.formData.idcard_z == '') {
					let uresult = await _self.uploadFileFun(_self.formData.idcard_z_img);
					if (!uresult) {
						uni.showToast({
							title: "身份证正面照上传失败",
							icon: 'none'
						});
						return;
					}
					_self.formData.idcard_z = uresult;
				}
				serve.request({
					url: '/spread/salesman/apply',
					data: _self.formData
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('access-token', res.data["access-token"]);
						if (res.data.isConfim == 1) {
							let rechargeMoney = res.data.recharge;
							uni.showModal({
								title: '提示',
								content: res.message,
								showCancel: true,
								cancelText: '批发商城',
								confirmText: '去充值',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/business/recharge?money=' +
												rechargeMoney
										})
									} else if (res.cancel) {
										uni.redirectTo({
											url: '/pages/store/batch'
										})
									}
								}
							});
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								success: function() {
									uni.redirectTo({
										url: '/pages/store/batch'
									})
								}
							});

						}

						return;
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					uni.login({
						success: function(res) {
							_self.formData.wechatCode = res.code;
						},
						fail: function() {
							uni.showToast({
								title: '当前微信版本不支持，请升级',
								icon: 'none'
							});
						}
					});
					_self.isSubmit = false;

				});
				_self.isSubmit = true;
			},
			chooseImage(k) {
				_self.isLoad = true;
				let surplusNum = 1;
				uni.chooseImage({
					count: surplusNum,
					sizeType: ['original'],
					// sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFiles;
						tempFilePaths.forEach((file, key) => {
							const maxSize = 10 * 1024 * 1024;
							// console.info("file.size = " + file.size);
							if (file.size > maxSize) {
								uni.showToast({
									icon: "none",
									title: "文件不能大于10兆",
									mask: true,
									duration: 1.5e3
								});
								return;
							} else {
								if (k == 0) {
									_self.formData.idcard_z = '';
									_self.formData.idcard_z_img = file.path;
									return;
								}
								if (k == 1) {
									_self.formData.idcard_f = '';
									_self.formData.idcard_f_img = file.path;
									return;
								}
							}
						});
						_self.$forceUpdate();
					}
				});
			},
			async uploadFileFun(file) {
				let accessToken = uni.getStorageSync('access-token');
				let appkey = uni.getStorageSync('appkey');
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: serve.apiUrl() + '/v1/file/images?appkey=' + appkey +
							'&access-token=' + accessToken,
						filePath: file,
						name: 'file',
						formData: {},
						success: (uploadFileRes) => {
							let result = JSON.parse(uploadFileRes.data);
							console.info(result);
							if (result.code == 200) {
								resolve(result.data.imgPath);
							} else {
								resolve(false);
			 			}
						}
					});
				});
			},

			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(option) {
			_self = this;
			_self.formData.bid = option.bid;
			uni.login({
				success: function(res) {
					_self.formData.wechatCode = res.code;
				},
				fail: function() {
					uni.showToast({
						title: '当前微信版本不支持，请升级',
						icon: 'none'
					});
				}
			});
		},
		onShow() {
			if (_self.isLoad == false) {
				_self.getInfo();
			}
		}
	}
</script>

<style scoped lang="scss">
	.merchantInto {
		padding-bottom: 100upx;

		.main {
			width: 100%;
			height: 360upx;
		}

		.heng {
			width: 100%;
			height: 12upx;
			background: #F8F8FA;
		}

		.nobottom {
			border: none !important;
		}

		.deal {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			padding: 55upx 0upx;

			text:nth-child(2) {
				color: #999999;
				margin-left: 11upx;
			}

			text:nth-child(3) {
				color: #EB5938;
				margin-left: 11upx;
			}

			.sel {
				background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/icon37.png);
				background-repeat: no-repeat;
				width: 30upx;
				height: 30upx;
				background-size: 100%;
				margin-right: 20upx;
			}

			.nosel {
				width: 30upx;
				height: 30upx;
				border: 1upx solid #999999;
				border-radius: 50%;
				margin-right: 20upx;
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28upx;
			background: rgba(255, 188, 0, 1);
			z-index: 9;
		}

		.title {
			color: #666666;
			font-size: 32upx;
			font-weight: bold;
			padding-top: 52upx;
			padding-left: 30upx;
		}

		.jt::after {
			position: absolute;
			right: 30upx;
			top: 60upx;
			content: '';
			border: 1upx solid rgba(57, 72, 107, 0.5);
			border-width: 0 3upx 3upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
		}

		.line {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 44upx 30upx;
			border-bottom: 1upx #EBEBEB solid;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 32upx;

				.txt {
					color: #999999;
				}

				.txt1 {
					color: #333333;
					font-size: 32upx;
				}

				.txt2 {
					color: #999999;
					font-size: 24upx;
					margin-top: 10upx;
				}

				input {
					width: 690upx;
				}

				.textarea {
					border: 1px solid #ccc;
					width: 90vw;
					padding: 10rpx;
					height: 100rpx;
				}
			}

			.right {
				.bottom1 {
					color: #e64545;
					margin-right: 20rpx;
				}

				input {
					// color: #CCCCCC;
					font-size: 32upx;
					text-align: right;
					border: 1rpx solid #ccc;
					height: 60rpx;
					padding-right: 10rpx;
				}

				.selPicker {
					padding: 0 10rpx;
					border: 1px solid #cccc;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					letter-spacing: 5rpx;
				}

				.region {
					font-size: 32upx;
					color: #333333;
					padding-right: 30upx;
				}

				.noregion {
					color: #CCCCCC;
					padding-right: 30upx;
				}

				.sel {
					background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
					margin-right: 20upx;
				}

				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid #999999;
					border-radius: 50%;
					margin-right: 20upx;
				}
			}
		}

	}

	.photos {
		box-sizing: border-box;
		padding: 30upx 30upx;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 150upx;
			height: 150upx;
			border-radius: 10upx;
			margin-bottom: 20upx;
		}

		.photo_list {
			margin-right: 30upx;
			padding-bottom: 20upx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;

			view {
				color: red;
				font-size: 30upx;
			}

			.del {
				width: 48upx !important;
				position: absolute;
				height: 48upx !important;
				top: -24upx;
				right: -24upx;
			}
		}
	}
</style>
